<template>
    <f7-sheet :id="sheetId" :opened="sheetOpened" :backdrop="true" @sheet:closed="close">
        <f7-toolbar>
            <div class="left">{{title}}</div>
            <div class="right">
	            <f7-link @click="close">确定</f7-link>
	        </div>
        </f7-toolbar>
        <!-- <div class="col-wrapper">
        	<div class="list float-left" v-for="i in colAmount" :key="i - 1" :width="colWidth(i - 1)-10">
			  <ul>
			    <li v-for="(row, j) in cols[i - 1]" :key="row.value" :title="row.displayValue"
			    :style="{'background-color': row.value == values[i - 1] ? 'rgb(170, 180, 185)' : 'rgb(207, 213, 218)'}"
	            @click="setValue(i - 1, row.value)">{{row.displayValue}}</li>
			  </ul>
			</div>
        </div> -->
         <!-- <f7-list :style="{'margin-top':'5px','margin-bottom':'5px', 'font-size':'12px', 'overfolw':'auto',
         'width': 'calc(' + colWidth(i - 1)+'% - ' + (colAmount-1)*8 +'px)','margin-left':i-1 ==0 ? '0px': '8px',
         'margin-right': i==colAmount ? '0px': '8px'}" :width="'calc(' + colWidth(i - 1)+'%-' + (colAmount-1)*8 +'px)'"
	    	class="float-left y-overflow" v-for="i in colAmount" :key="i - 1" >
	        <f7-list-item v-for="(row, j) in cols[i - 1]" link="#" no-chevron
	            :key="row.value" :title="row.displayValue"
	            :style="{'background-color': row.value == values[i - 1] ? 'rgb(170, 180, 185)' : 'rgb(207, 213, 218)'}"
	            @click="setValue(i - 1, row.value)" no-chevron>
	        </f7-list-item>
	    </f7-list> -->
       <div class="page-content stop-scrolling">
	        <div class="block h100" style="margin-top:5px; padding-left:1px; padding-right:1px;">
		        <f7-row class="h100">
		            <f7-col class="h100" v-for="i in colAmount" :key="i - 1" :width="colWidth(i - 1)">
					    <f7-list class="scrolling"  style="margin-top:5px; margin-bottom:5px; font-size:12px;">
					        <f7-list-item v-for="(row, j) in cols[i - 1]" link="#" no-chevron
					            :key="row.value" :title="row.displayValue"
					            :style="{'background-color': row.value == values[i - 1] ? 'rgb(170, 180, 185)' : 'rgb(207, 213, 218)'}"
					            @click="setValue(i - 1, row.value)">
					        </f7-list-item>
					    </f7-list>
		            </f7-col>
		        </f7-row>
	        </div>
        </div>
     
    </f7-sheet>
</template>

<script>
import Common from "@/utils/Common.js";
import DateUtil from "@/utils/DateUtil.js";
import $ from 'jquery';
import events from 'events';
export default {
    props: {
    	colAmount: {
    		type: Number,
    		default: 1
    	},
    	colTrees: {
    		type: Array,
    		default: function() {
    			return [];
    		}
    	},
    	colsValue: {
    		type: Array,
    		default: function() {
    			return [];
    		}
    	},
    	colsWidth: {
    		type: Array,
    		default: function() {
    			return [];
    		}
    	}
    },
    data: function() {
        return {
        	sheetId: Common.uuid(),
        	sheetOpened: false,
        	cols: [],
        	treeMap: {},
        	values: []
        };
    },
    methods: {
    	open: function() {
    		this.sheetOpened = true;
    	},
    	close: function() {
    		this.sheetOpened = false;
    		this.$emit('selected', this.values);
    	},
    	processColTree: function(colTree) {
            this.treeMap[colTree.value] = colTree;
            if(colTree.children && colTree.children instanceof Array) {
                for(var i = 0; i < colTree.children.length; i++) {
                    var child = colTree.children[i];
                    this.processColTree(child);
                }
            }
    	},
    	colWidth: function(col) {
            return (this.colsWidth.length > col) ? this.colsWidth[col] : parseInt(100 / this.colAmount);
    	},
    	setValue: function(col, value) {
    		this.values.splice(col, 1, value);
    		if(col < this.colAmount - 1) {
                var tree = this.treeMap[value];
                this.cols.splice(col + 1, 1, tree.children);
    			this.setValue(col + 1, tree.children[0].value);
    		}
    	},
    	setValues: function(values) {
    		var trees = this.colTrees;
    		for(var i = 0; i < this.colAmount; i++) {
    			this.cols.splice(i, 1, trees);
    			var value = values != null ? values[i] : null;
    			if(value == null) {
    				value = trees[0].value;
    			}
                this.values.splice(i, 1, value);
    			var tree = this.treeMap[value];
    			trees = tree.children;
    		}
    	}
    },
    computed: {
    	title: function() {
    		var self = this;
    		var displayValues = this.values.map(function(value) {
    			return self.treeMap[value].displayValue;
    		});
    		return displayValues.join("——");
    	}
    },
    watch: {
    	'colTrees': function(newVal, oldVal) {
            for(var i = 0; i < this.colTrees.length; i++) {
                var colTree = this.colTrees[i];
                this.processColTree(colTree);
            }
            this.setValues();
    	}
    },
    created: function() {
        var self = this;
        for(var i = 0; i < this.colAmount; i++) {
            this.cols.push([]);
        }
        for(var i = 0; i < this.colTrees.length; i++) {
            var colTree = this.colTrees[i];
            this.processColTree(colTree);
        }
        this.setValues(this.colsValue);
       
    },
    mounted: function() {
    	
    }
}
</script>

<style scoped>
.stop-scrolling{
	overflow: visible !important;
	height: 100%;
}
.scrolling{
	overflow: auto !important;
	height: 100%;
}
.h100{
	height: 100%
}
ul::-webkit-scrollbar {
  	width: 0;
}
 div::-webkit-scrollbar {
   	width: 0;
 }
 
</style>
